import React, { Component } from 'react';
import { Modal, Form, message, Radio, Input, Select } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
function getTypeNum(TypeName, ProgType) {
  for (let i = 0; i < ProgType.length; i++) {
    if (ProgType[i].name === TypeName) {
      return ProgType[i].code
    }
  }
}
export default class NewForm extends Component {
  submit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        //console.log('Received values of form: ', values);
        const progSize = `${values.width}*${values.height}`;

        this.props.dispatch({
          type: 'program/edit',
          payload: { ...values, progSize },
          callback: () => {
            message.success('编辑节目信息成功！');

            this.props.handleEditModalVisible(false);
            this.props.form.resetFields();
            //this.props.handleSearch();
            // this.props.dispatch({
            //   type: 'program/fetch',
            // });
          },
        });
      }
    });
  };

  render() {
    const { editMmodalVisible, form, handleEditModalVisible, program, progType } = this.props;
    const progNum = getTypeNum(program.progType, progType);
    let arr = ['', ''];
    const temp = program.progSize;
    arr = (temp || '0*0').split('*');

    return (
      <Modal
        title="编辑节目信息"
        visible={editMmodalVisible}
        forceRender
        onOk={this.submit}
        onCancel={() => handleEditModalVisible(false)}
      >
        <Form>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="">
            {form.getFieldDecorator('progId', {
              initialValue: program.progId,
            })(<Input hidden="true" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="名称">
            {form.getFieldDecorator('progName', {
              initialValue: program.progName,
              rules: [
                {
                  required: true,
                  message: '请勿使用特殊字符',
                  pattern: RegExp('^[\u4e00-\u9fa5_a-zA-Z0-9]+$'),
                },
              ],
            })(<Input placeholder="请使用汉字、字母和数字" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="作者">
            {form.getFieldDecorator('progAuthor', {
              initialValue: program.progAuthor,
              rules: [{ required: true, message: '请输入作者...' }],
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
            {form.getFieldDecorator('progType', {
              initialValue: progNum,
              rules: [{ required: true, message: '请选择节目类型...' }],
            })(
              <Select allowClear="true" placeholder="节目类型" style={{ width: '100%' }}>
                {progType.map((item, index) => (
                  <Option value={item.code}>{item.name}</Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="宽">
            {form.getFieldDecorator('width', {
              initialValue: arr[0],
              rules: [{ required: true, message: '请输入节目的宽...' }],
            })(<Input placeholder="宽" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="高">
            {form.getFieldDecorator('height', {
              initialValue: arr[1],
              rules: [{ required: true, message: '请输入节目的高...' }],
            })(<Input placeholder="高" />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
